<template>
  <div class="app-container jklis">
    <div class="zdy-main">
      <el-form :model="queryParams" ref="queryForm" :inline="true" class="zdy-form search-form-new" label-width="auto" @keyup.enter.native="search">
        <el-form-item label="店铺" prop="tenantId" v-hasPermi="['searchTenantID']">
          <el-select v-model="queryParams.tenantId" placeholder="请选择店铺" clearable filterable>
            <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
          </el-select>
        </el-form-item>
        <el-form-item v-hasPermi="['searchTenantID']" label="是否汇付" prop="">
          <el-select v-model="queryParams.isHuifu" placeholder="是否汇付" clearable size="small">
            <el-option  label="非汇付"  :value="1"></el-option>
            <el-option   label="汇付" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-hasPermi="['searchTenantID']" label="订单类型" prop="orderType">
          <el-select v-model="queryParams.orderType" placeholder="订单类型" clearable size="small">
            <el-option v-for="(item, key) in typeMap" :label="item" :key="key" :value="key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="orderState">
          <el-select v-model="queryParams.orderState" placeholder="订单状态" clearable size="small">
            <el-option v-for="(item, key) in commonMaps.payOrderStateMap" :label="item.name" :key="key" :value="key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式" prop="payWays">
          <el-select v-model="queryParams.payWays" multiple placeholder="支付方式" clearable size="small">
            <el-option v-for="(item, key) in commonMaps.payWayMap" :label="item" :key="key" :value="key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务订单号" prop="no">
          <el-input v-model="queryParams.no" placeholder="业务订单号" clearable size="small" />
        </el-form-item>
        <el-form-item label="支付渠道单号" prop="payNo">
          <el-input v-model="queryParams.payNo" placeholder="支付渠道单号" clearable size="small" />
        </el-form-item>
        <el-form-item label="商品编号" prop="goodsId">
          <el-input v-model="queryParams.goodsId" placeholder="商品编号" clearable size="small" />
        </el-form-item>
        <el-form-item label="创建时间" prop="">
          <el-date-picker v-model="timer2" type="daterange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="支付时间" prop="">
          <el-date-picker v-model="timer" type="daterange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" icon="el-icon-search" @click="search" class="zdy-btn">搜索</el-button>
          <el-button icon="el-icon-refresh" type="warning" @click="resetQuery" class="zdy-btn zdy-btn-refresh">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="total_box" v-if="orderStateTotal">
        <span v-if="orderStateTotal[1]">
          未支付： <span style="color: #666;" class="total_num">{{ orderStateTotal[1].totalAmount }}</span>
        </span>
        <span v-if="orderStateTotal[3]">
          已撤销： <span style="color: #ffce73;" class="total_num">{{ orderStateTotal[3].totalAmount }}</span>
        </span>
        <span v-if="orderStateTotal[2]">
          已支付： <span style="color: #6c5dd3;" class="total_num">{{ orderStateTotal[2].totalAmount }}</span>
        </span>
       
        <span v-if="orderStateTotal[4]">
          已完成： <span style="color: green;" class="total_num">{{ orderStateTotal[4].totalAmount }}</span>
        </span>
        <span v-if="orderStateTotal[5]">
          已退款： <span style="color: red;" class="total_num">{{ orderStateTotal[5].totalAmount }}</span>
        </span>
        
      </div>
      <div class="table_box">
        <el-table stripe :data="tableData.records" border>
          <!-- <el-table-column prop="id" label="序号" width="80"></el-table-column> -->
          <el-table-column v-if="checkPermi(['searchTenantID'])" prop="tenantName" label="店铺" width="120">
            <template slot-scope="scope">
              <span>{{scope.row.tenantId==1?'互联': scope.row.tenantName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="orderType" label="类型" width="120">
            <template slot-scope="scope">
              <span>{{ typeMap[scope.row.orderType] }}</span>
            </template>
          </el-table-column>
          
         

          <el-table-column prop="orderState" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="commonMaps.payOrderStateMap[scope.row.orderState].type">{{ commonMaps.payOrderStateMap[scope.row.orderState].name
              }}</el-tag>

            </template>
          </el-table-column>
          <el-table-column prop="payTotalMoney" label="金额" width="100"></el-table-column>
          <el-table-column prop="userName" label="买家昵称" show-overflow-tooltip width="150"></el-table-column>
          <el-table-column prop="payWay" label="支付方式" width="100">
            <template slot-scope="scope">
              <span> <span v-if="scope.row.isHuifu==2">汇付-</span> {{ commonMaps.payWayMap[scope.row.payWay] }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="checkPermi(['searchTenantID'])" prop="payScene" label="客户端" width="100">
            <!-- paySceneyMap -->
            <template slot-scope="scope">
              <span>{{ paySceneyMap[scope.row.payScene] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
          <el-table-column prop="payEndTime" label="支付时间" width="160"></el-table-column>
          <el-table-column prop="payNo" label="支付渠道单号" min-width="150" show-overflow-tooltip></el-table-column>
          <el-table-column prop="no" label="业务订单号" min-width="150" show-overflow-tooltip></el-table-column>
          <el-table-column prop="goodsId" label="商品编号" width="100"></el-table-column>
          <el-table-column prop="goodsTitle" label="支付商品" show-overflow-tooltip width="160"></el-table-column>
          <el-table-column v-if="checkPermi(['searchTenantID'])" prop="remark" label="支付备注" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column v-if="checkPermi(['searchTenantID'])" prop="orderOther" label="其他参数" width="120" show-overflow-tooltip></el-table-column>

          <!-- <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="editRow(scope.row)">编辑</el-button>
              <el-button type="text" @click="delRow(scope.row)">删除</el-button>

            </template>
          </el-table-column> -->
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryParams.pageNum" :page-sizes="[10, 20, 30, 40, 50, 60]" :page-size="queryParams.pageSize" layout="total, prev, pager, next, jumper" :total="tableData.total"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// import addDialog from './components/add'
import payApi from "@/api/financeCenter/pay";
export default {
  name: "Zhifujilu",
  // components: { addDialog },
  data() {
    return {
      timer: [],
      timer2:[],
      typeMap: {
        1: "商品销售",
        3: "虞豆充值",
        4: "需求定制",
        5: "软件销售",
        6: "回收押金",
        7: "回收订单",
        8: "保证金订单",
        9: "余额充值",
        10: "系统开户",
        11: "共享卡位",
        12: "基础服务包",
        13: "商城服务包",
      },

      paySceneyMap: {
        1: "app支付",
        2: "h5支付",
        3: "pcweb支付",
        4: "JSAPI",
      },
      tableData: {
        records: [],
        total: 0,
      },
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderState:'',
        createTimeStart:'',
        createTimeEnd:'',
        orderType:''
      },
      orderStateTotal:null,//各状态总数
    };
  },
  created() {
    this.orderStateTotal =null
    this.setDefault()
    this.getList();
  },
  activated() {},
  computed: {
    tenantList() {
      return this.$store.getters.tenantList;
    },
    shopInfo() {
      return this.$store.getters.shopInfo;
    }
  },
  methods: {
    // 设置默认条件
    setDefault(){
      this.queryParams.orderState = ''
      // 获取今日日期
      const today = this.parseTime(new Date(),'{y}-{m}-{d}') 
      this.timer2 = [today,today]
    },
    // 获取列表
    getList() {
      this.loading = true;
      if (this.timer && this.timer.length) {
        this.queryParams.payEndTimeStart = this.timer[0] + " 00:00:00";
        this.queryParams.payEndTimeEnd = this.timer[1] + " 23:59:59";
      } else {
        this.queryParams.payEndTimeStart = "";
        this.queryParams.payEndTimeEnd = "";
      }
      if (this.timer2 && this.timer2.length) {
        this.queryParams.createTimeStart = this.timer2[0] + " 00:00:00";
        this.queryParams.createTimeEnd = this.timer2[1] + " 23:59:59";
      } else {
        this.queryParams.createTimeStart = "";
        this.queryParams.createTimeEnd = "";
      }
      if(this.shopInfo&&this.shopInfo.tenantId){
        // this.queryParams.tenantId = this.shopInfo.tenantId
        this.queryParams.orderType = 1
      }
      payApi.getPayRecords(this.queryParams).then((response) => {
        this.tableData.records = response.rows;
        this.tableData.total = response.total;
        const objTemp = this.arrayToObject(response.params.orderStateTotal,'orderState')
        this.orderStateTotal = objTemp
        this.loading = false;
      });
    },

    // 搜索
    search() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getList();
    },

    //重置
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        orderState:'2',
        createTimeStart:'',
        createTimeEnd:'',
        orderType:''
      };
      this.timer = [];
      this.timer2 = [];
      this.setDefault()
      this.getList();
    },

    // 每页条数改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 页码改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.zdy-des {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 6px 0;
}

.search-form-new ::v-deep .el-input {
  width: 200px !important;
}
.table_box{
  box-shadow: none !important;
}
.total_box{
  margin-bottom: 10px;
  font-size: 14px;
  .total_num{
    font-size: 20px;
    margin-right: 20px;
  }
}
</style>